<template>
  <view class="content">
    <view class="bg"
      ><image class="logo" src="../../static/newban3.png"
    /></view>
    <cmd-notice-bar
      rows
      round
      text="为了确保您的资金安全，请设置支付密码。为了确保您的资金安全，请设置支付密码。为了确保您的资金安全，请设置支付密码."
      scrollable
      type="warning"
      class="toast"
    />
    <view class="tab-content">
      <view style=" margin-top: 20upx">
        <zzx-tabs
          :items="items"
          :current="current"
          @clickItem="onClickItem"
          ref="mytabs"
        />
      </view>
      <view style="color: #999999; font-size: 24upx">
        <view v-show="current === 0">
          <view class="area-choose">
            <view class="area-left">
              <!-- <text>{{ startCity.name || '' }}</text> -->
              <AddressPicker
                class="title"
                @change="change($event, 0)"
                :level="2"
                >{{ startCity.name || "出发地" }}
              </AddressPicker>
              <!-- <image src="../../static/sort-down.png" mode=""></image> -->
            </view>
            <image src="../../static/toggle.png" mode=""></image>
            <view class="area-right">
              <AddressPicker
                class="title"
                @change="change($event, 1)"
                :level="2"
                >{{ endCity.name || "目的地" }}
              </AddressPicker>
              <!-- <image src="../../static/sort-down.png" mode=""></image> -->
            </view>
          </view>

          <template v-if="!toInfo">
            <!-- 开始到结束 -->
            <view class="area-title">
              <view class="area-name">
                <image src="../../static/position.png" mode=""></image>
                <text class="area-current">{{ startCity.name }}</text>
                <text class="level">{{ fromType }}</text>
              </view>
              <view class="area-code">出发地健康码</view>
            </view>
            <view class="policy">
              <view>外出政策</view>
              <view> {{ fromInfo['out_desc'] || "" }}</view>
              <view>进入政策</view>
              <view>
                {{ fromInfo.high_in_desc || "" }}
              </view>
              <view class="article-hr" />
              <view>
                以上政策整理自当地政府等公开发布的信息，如有更新或错漏，请以最
                新政策为准，建议在出行前咨询当地防疫部门、机场、火车站等。
              </view>
            </view>

            <view class="card">请准备号进出凭证</view>
            <view class="code">
              <view class="code-title">
                <image src="../../static/code.png"></image>
                <text>{{ startCity.name }}</text>
              </view>
              <view class="code-img">
                <text>{{ startCity.pro }}健康码</text>
                <image src="../../static/right.png"></image>
              </view>
            </view>
          </template>

					
          <template v-else>
            <view class="area-title">
              <view class="area-name">
                <image src="../../static/position.png" mode=""></image>
                <text class="area-current">{{ "出" + startCity.name }}</text>
                <text class="level">{{ fromType }}</text>
              </view>
              <view class="area-code">出发地健康码</view>
            </view>
            <view class="policy">
              <view></view>
              <view>疫情防控服务、应急咨询热线电话：12345</view>
              <view></view>
              <view> </view>
              <view class="article-hr" />
              <view />
            </view>
            <view class="area-title">
              <view class="area-name">
                <image src="../../static/position.png" mode=""></image>
                <text class="area-current">{{ "进" + endCity.name }}</text>
                <text class="level">{{ toType }}</text>
              </view>
              <view class="area-code">目的地健康码</view>
            </view>
            <view class="policy">
              <view></view>
              <view>疫情防控服务、应急咨询热线电话：12345</view>
              <view></view>
              <view>
                {{ toInfo.high_in_desc || "" }}
              </view>
              <view class="article-hr" />
              <view />
            </view>

            <view class="area-title">
              <view class="area-name">
                <image src="../../static/position.png" mode=""></image>
                <text class="area-current">{{ "出" + endCity.name }}</text>
                <text class="level">{{ toType }}</text>
              </view>
              <view></view>
            </view>
            <view class="policy">
              <view></view>
              <view></view>
              <view></view>
              <view>
                {{ toInfo['out_desc']|| "" }}
              </view>
              <view class="article-hr" />
              <view> </view>
            </view>
            <view class="area-title">
              <view class="area-name">
                <image src="../../static/position.png" mode=""></image>
                <text class="area-current">{{ "进" + startCity.name }}</text>
                <text class="level">{{ fromType }}</text>
              </view>
              <view></view>
            </view>
            <view class="policy">
              <view></view>
              <view></view>
              <view></view>
              <view>
                {{ fromInfo.out_desc || "" }}
              </view>
              <view class="article-hr" />
              <view> </view>
            </view>
            <view class="card">请准备号进出凭证</view>
            <view class="code">
              <view class="code-title">
                <image src="../../static/code.png"></image>
                <text>{{ startCity.name }}</text>
              </view>
              <view class="code-img">
                <text>{{ startCity.pro }}健康码</text>
                <image src="../../static/right.png"></image>
              </view>
            </view>
            <view class="code">
              <view class="code-title">
                <image src="../../static/code.png"></image>
                <text>{{ endCity.name }}</text>
              </view>
              <view class="code-img">
                <text>{{ endCity.pro }}健康码</text>
                <image src="../../static/right.png"></image>
              </view>
            </view>
          </template>
        </view>

        <view v-show="current === 1">
					<Area :areaInfo="areaInfo"/>
				</view>
        <view v-show="current === 2">
					<institutions :juhekey="juheKey" :city="startCity"/>
				</view>
      </view>
    </view>
    <view class="footer"
      >以上政策仅供参考，可能存在更新延迟或错误，请以相关部门
      最新官方通知为准。</view
    >
		
  </view>
</template>

<script>
import cmdNoticeBar from "../../components/cmd-notice-bar/cmd-notice-bar.vue";
import zzxTabs from "../../components/zzx-tabs/zzx-tabs.vue";
import AddressPicker from "../../components/lingdang-AddressPicker/AddressPicker.vue";
import AllAddress from "../../components/lingdang-AddressPicker/AddressData.js";
import Area from '../../components/Area/Area.vue'
import institutions from '../../components/institutions/institutions.vue'
export default {
  data() {
    return {
      items: ["出行政策", "风险地区", "核酸检测机构"],
      current: 2, //当前选中tab
      startCity: {
        code: 0, //当前城市id
        name: "", //当前城市名
        pro: "", //当前城市省份
      },
			areaInfo:null,
      endCity: {
        code: "10001", //目的地城市id
        name: "", //目的地城市名
        pro: "", //目的地城市省份
      },
      gaodKey: "f86a7780c45355aa307d424a3f8636cc", //高德地图key
      // juheKey: "8a57d1ac37c9846e853cf8877563fef5", //wo聚合key
      juheKey: "7a4e1b165095634b3a62a9364cd455f6", //聚合key
      fromInfo: null, //出发地信息
      toInfo: null, //目的地信息
    };
  },
  components: {
    cmdNoticeBar,
    zzxTabs,
    AddressPicker,
		Area,
		institutions
  },
  computed: {
    fromType() {
      const arr = [
        "暂无",
        "低风险",
        "中风险",
        "高风险",
        "部分地区中风险",
        "部分地区高风险",
        "部分地区中、高风险",
      ];
      return this.fromInfo ? arr[this.fromInfo.risk_level] : arr[0];
    },
    toType() {
      const arr = [
        "暂无",
        "低风险",
        "中风险",
        "高风险",
        "部分地区中风险",
        "部分地区高风险",
        "部分地区中、高风险",
      ];
      return this.toInfo ? arr[this.toInfo.risk_level] : arr[0];
    },
  },
  onLoad() {
    uni.getLocation({
      //定位当前地址
      type: "wgs84",
      success: (res) => {
        //拿到经纬度进行请求周边信息用以获取详细信息
        uni.request({
          url: "https://restapi.amap.com/v3/place/around?",
          data: {
            key: this.gaodKey,
            location: res.longitude + "," + res.latitude,
          },
          success: (res) => {
            // console.log(res);
            const cityName = [...res.data.pois[0].cityname]; //分割城市名
            const proName = [...res.data.pois[0].pname].splice(0, 2).join("");
            cityName.pop(); //删除市字
            this.startCity.name = cityName.join(""); //拼接字符串
            this.startCity.pro = proName;
            let name = "name";
            for (let item of AllAddress) {
              //循环遍历查询
              for (let i of item.citys) {
                if (i[name] === this.startCity.name) {
                  //如果出发城市名和里面城市名对应上则把对应的id拿出来
                  this.startCity.code = i.id;
                }
              }
            }
            uni.request({
              url: "http://apis.juhe.cn/springTravel/query",
              data: {
                from: this.startCity.code,
                to: this.endCity.code,
                key: this.juheKey,
              },
              success: (res) => {
                const fromInfo = res.data.result.from_info;
                this.fromInfo = fromInfo;
								
              },
            });
          },
        });
      },
    });
		uni.request({
			url: 'http://apis.juhe.cn/springTravel/risk',
			data: {
				key: this.juheKey
			},
			success: res => {
				console.log(res);
				this.areaInfo = res.data.result
			}
		})
	},
  methods: {
    change(e, type) {
      if (type) {
        this.endCity.pro = e.data[0].name;
        this.endCity.name = e.data[1].name;
        this.endCity.code = e.data[1].id;
      } else {
        this.startCity.pro = e.data[0].name;
        this.startCity.name = e.data[1].name;
        this.startCity.code = e.data[1].id;
      }
      // console.log(this.startCity.code);
      // console.log(this.endCity.code);
      uni.request({
        url: "http://apis.juhe.cn/springTravel/query",
        data: {
          from: this.startCity.code,
          to: this.endCity.code,
          key: this.juheKey,
        },
        success: res => {
          const fromInfo = res.data.result.from_info;
          const toInfo = res.data.result.to_info;
          this.fromInfo = fromInfo;
          this.toInfo = toInfo;
          this.flag = false;
					
        },
      });
    },
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex;
      }
    },
  },
};
</script>

<style>
.content {
  background: rgb(238, 239, 239);
}

.bg {
  width: 100%;
}

.toast {
  background: #ffffff !important;
  position: relative;
  top: -30rpx;
  margin: 0 20rpx;
}

.bg image {
  width: 100%;
  height: 360rpx;
}

.tab-content {
  background: #fff;
  border-radius: 30rpx;
  margin: 0 20rpx;
  padding: 20rpx 0;
}

.area-left text {
  position: relative;
}

.area-choose {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100rpx;
  background: #e7e7e7;
  width: 600rpx;
  border-radius: 30rpx;
  margin: 20rpx auto;
}

.area-choose > image {
  width: 50rpx;
  height: 50rpx;
}

.area-left image {
  width: 25rpx;
  height: 25rpx;
}

.area-right image {
  width: 25rpx;
  height: 25rpx;
}

.area-title {
  display: flex;
  justify-content: space-between;
  padding: 0 50rpx;
}

.area-title .area-name {
  display: flex;
  align-items: center;
}

.area-title .area-name image {
  width: 50rpx;
  height: 50rpx;
}

.area-title .area-name .area-current {
  color: #333333;
  font-weight: bolder;
  font-size: 30rpx;
}

.area-title .area-name .level {
  color: green;
  margin-left: 15rpx;
  font-size: 24rpx;
  border: 1px solid green;
}

.area-title .area-code {
  background: #2f883e;
  color: #fff;
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25rpx;
  width: 200rpx;
}

.policy {
  width: 550rpx;
  margin: 20rpx auto;
}

.policy view:nth-child(1) {
  font-size: 30rpx;
  color: #333;
  font-weight: bolder;
  margin: 20rpx 0;
}

.policy view:nth-child(2) {
  margin: 20rpx 0;
}

.policy view:nth-child(3) {
  font-size: 30rpx;
  color: #333;
  font-weight: bolder;
  margin: 20rpx 0;
}

.policy view:nth-child(4) {
  margin: 20rpx 0;
}

.policy .article-hr {
  width: 100%;
  height: 3rpx;
  margin: 20rpx 0;
  background: rgb(218, 216, 216);
}

.policy view:nth-child(6) {
  margin: 20rpx 0;
  color: rgb(218, 216, 216);
}

.card {
  font-size: 40rpx;
  width: 600rpx;
  margin: 0 auto;
  margin-top: 40rpx;
}

.code {
  width: 650rpx;
  margin: 30rpx auto;
  display: flex;
  border-radius: 15rpx;
  padding: 0 10rpx;
  background: linear-gradient(145deg, #f0f0f0, #dadada);
  box-shadow: 1px 1px 25px #c9c9c9, -1px -1px 25px #ffffff;
  justify-content: space-between;
}

.code .code-title {
  display: flex;
  align-items: center;
}

.code .code-title image {
  width: 100rpx;
  height: 100rpx;
}

.code .code-title text {
  color: #333;
  font-size: 40rpx;
}

.code .code-img {
  display: flex;
  align-items: center;
}

.code .code-img image {
  width: 30rpx;
  height: 30rpx;
}

.footer {
  width: 650rpx;
  margin: 20rpx auto;
  font-size: 20rpx;
  color: #cacaca;
}
</style>
